<template>
  <el-drawer v-model="isShowPlayList" direction="rtl" :with-header="false" class="cus-el-drawer">
    <div class="flex h-screen flex-col">
      <div class="p-2.5">
        <div class="text-xl">播放列表</div>
        <div class="flex items-center justify-between text-gray-500">
          <span class="text-xs">共{{ playListCount }}首歌</span>
          <IconPark class="icon-hover" :icon="Clear" @click="clear" />
        </div>
      </div>
      <div class="flex-1 overflow-hidden">
        <el-scrollbar>
          <PlayListItem
            v-for="item in playList"
            :key="item.id"
            :info="item"
            :activeId="id"
            @toggle-song="toggleSong"
          ></PlayListItem>
        </el-scrollbar>
      </div>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue'
import { usePlayerStore } from '@/stores/player'
import IconPark from '@/components/icon-park/IconPark.vue'
import { Clear } from '@icon-park/vue-next'
import PlayListItem from './components/PlayListItem.vue'
import type { MusicSong } from '@/types/song/index'

const { isShowPlayList, playListCount, playList, id, setId, clear } = toRefs(usePlayerStore())
const toggleSong = (e: MusicSong) => {
  setId.value(e.id)
}
</script>

<style lang="less">
.cus-el-drawer {
  .el-drawer__body {
    padding: 0;
  }
}
</style>
